<template>
  <div class="property-list">
    <!-- 页面标题 -->
    <el-card
      class="header-card"
      shadow="never"
    >
      <div class="header-row">
        <h2>房源管理</h2>
        <el-button
          type="primary"
          :icon="Plus"
          @click="handleAdd"
        >
          新建房源
        </el-button>
      </div>
    </el-card>

    <!-- 筛选区域 -->
    <el-card
      shadow="never"
      style="margin-top: 16px"
    >
      <el-form
        :model="queryParams"
        inline
      >
        <el-form-item label="小区名称">
          <el-input
            v-model="queryParams.community_name"
            placeholder="请输入小区名称"
            clearable
            style="width: 200px"
          />
        </el-form-item>

        <el-form-item label="房源状态">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择状态"
            clearable
            style="width: 150px"
          >
            <el-option
              label="空置"
              value="vacant"
            />
            <el-option
              label="已租"
              value="rented"
            />
            <el-option
              label="装修中"
              value="renovating"
            />
            <el-option
              label="已下架"
              value="delisted"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="租金范围">
          <el-input-number
            v-model="queryParams.min_price"
            :min="0"
            placeholder="最低"
            controls-position="right"
            style="width: 120px"
          />
          <span style="margin: 0 8px">-</span>
          <el-input-number
            v-model="queryParams.max_price"
            :min="0"
            placeholder="最高"
            controls-position="right"
            style="width: 120px"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            :icon="Search"
            @click="handleSearch"
          >
            查询
          </el-button>
          <el-button
            :icon="Refresh"
            @click="handleReset"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card
      shadow="never"
      style="margin-top: 16px"
    >
      <el-table
        v-loading="propertyStore.loading"
        :data="propertyStore.properties"
        stripe
        border
      >
        <el-table-column
          prop="id"
          label="ID"
          width="80"
        />
        <el-table-column
          prop="community_name"
          label="小区名称"
          min-width="150"
        />
        <el-table-column
          prop="room_number"
          label="房号"
          width="100"
        />
        <el-table-column
          prop="layout"
          label="户型"
          width="120"
        />
        <el-table-column
          prop="area"
          label="面积(㎡)"
          width="100"
        />
        <el-table-column
          prop="rent_price"
          label="租金(元/月)"
          width="120"
        >
          <template #default="{ row }">
            <span style="color: #f5222d; font-weight: bold"> ¥{{ row.rent_price }} </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="100"
        >
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="landlord_phone"
          label="房东电话"
          width="130"
        />
        <el-table-column
          label="操作"
          width="200"
          fixed="right"
        >
          <template #default="{ row }">
            <el-button
              type="primary"
              link
              size="small"
              @click="handleEdit(row)"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              link
              size="small"
              @click="handleDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="queryParams.page"
          v-model:page-size="queryParams.page_size"
          :total="propertyStore.total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSearch"
          @current-change="handleSearch"
        />
      </div>
    </el-card>

    <!-- 新建/编辑对话框 -->
    <PropertyDialog
      v-model="dialogVisible"
      :property-data="currentProperty"
      @success="handleDialogSuccess"
    />
  </div>
</template>

<script setup lang="ts">
/**
 * 房源管理页面
 *
 * Vue3 Composition API 最佳实践演示：
 * 1. 使用 <script setup> 语法糖
 * 2. 响应式数据使用 ref/reactive
 * 3. 组件化思维：PropertyDialog 独立组件
 * 4. TypeScript 类型支持
 * 5. Pinia Store 状态管理
 */
import { ref, reactive, onMounted } from 'vue'
import { usePropertyStore } from '@/stores/property'
import notify from '@/utils/notify'
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
import PropertyDialog from './PropertyDialog.vue'
import type { Property } from '@/api/types'

// ========== 状态管理 ==========
const propertyStore = usePropertyStore()

// ========== 响应式数据 ==========
const queryParams = reactive({
  page: 1,
  page_size: 20,
  community_name: '',
  status: '',
  min_price: undefined as number | undefined,
  max_price: undefined as number | undefined,
})

const dialogVisible = ref(false)
const currentProperty = ref<Property | null>(null)

// ========== 方法 ==========

/**
 * 查询列表
 */
const handleSearch = () => {
  propertyStore.fetchProperties(queryParams)
}

/**
 * 重置筛选
 */
const handleReset = () => {
  queryParams.community_name = ''
  queryParams.status = ''
  queryParams.min_price = undefined
  queryParams.max_price = undefined
  queryParams.page = 1
  handleSearch()
}

/**
 * 新建房源
 */
const handleAdd = () => {
  currentProperty.value = null
  dialogVisible.value = true
}

/**
 * 编辑房源
 */
const handleEdit = (row: Property) => {
  currentProperty.value = row
  dialogVisible.value = true
}

/**
 * 删除房源
 */
const handleDelete = (row: Property) => {
  notify
    .confirm(`确定要删除房源【${row.community_name} ${row.room_number}】吗？`, '提示')
    .then(async () => {
      const success = await propertyStore.deleteProperty(row.id)
      if (success) {
        handleSearch()
      }
    })
}

/**
 * 对话框成功回调
 */
const handleDialogSuccess = () => {
  dialogVisible.value = false
  handleSearch()
}

/**
 * 获取状态标签类型
 */
const getStatusType = (status: string): 'success' | 'info' | 'warning' | 'danger' | undefined => {
  const typeMap: Record<string, 'success' | 'info' | 'warning' | 'danger'> = {
    vacant: 'success',
    rented: 'info',
    renovating: 'warning',
    delisted: 'danger',
  }
  return typeMap[status]
}

/**
 * 获取状态文本
 */
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    vacant: '空置',
    rented: '已租',
    renovating: '装修中',
    delisted: '已下架',
  }
  return textMap[status] || status
}

// ========== 生命周期 ==========
onMounted(() => {
  handleSearch()
})
</script>

<style scoped>
.property-list {
  padding: 0;
}

.header-card {
  margin-bottom: 0;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-row h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
</style>
